<template>
	<view class="page-main">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header">
			<view class="header-left" @click="toBack()">
				<u-icon name="arrow-left" color="black" size="50"></u-icon>
			</view>
			<view class="header-center"  @click="personalInfoPage">
				<text>{{ type == 1 ? groupInfo.username : friendInfo.username }}</text>
			</view>
			
			
			<view class="header-right">
				
				    <u-icon size="50" ></u-icon>
				
				
			</view>
		</view>
		
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView">
			<view class="chat-main" :style="{ paddingBottom: inputh + 'px' }">
			<!-- 	<view v-if="friendInfo.new==1"  style="background-color: white;: 10%;margin:110rpx 30rpx 20rpx 30rpx;display: flex;height: 180rpx;padding-top: 20rpx;padding-left: 30rpx;" @click="toBack">
					<view style="width: 90%;height: 200rpx;">
						<text style="font-weight: bold;padding-bottom: 20rpx;">{{friendInfo.title}}</text>
						<view style="word-break: break-all;
				          overflow: hidden;
				          display: -webkit-box;
				          -webkit-line-clamp: 2;
				          -webkit-box-orient: vertical;font-size: 29rpx;padding-top: 20rpx;" >{{friendInfo.content}}</view>
					</view>
					<image :src="friendInfo.firstImg" style="height: 160rpx;" mode="aspectFit"></image>
				</view> -->
				<view v-if="friendInfo.new==1" style="z-index: 200;margin-top: 20rpx;text-align: center;font-size: 30rpx;font-weight: 300;">{{handleTime(date)}}</view>
				<!-- <view  v-if="friendInfo.new==1" style="z-index: 200;margin-top: 20rpx;text-align: center;font-size: 30rpx;font-weight: 300;" >在对方回应您之前只能发送一条消息哦</view> -->
				<view class="chat-ls" v-for="(item, index) in msgs" :key="index" :id=" 'msg' + item.id">
					<view class="chat-time" v-if="item.time != '' ">{{ handleTime(item.createTime) }}</view>
					<view class="msg-m" :class="item.fromId==myInfo.id ? 'msg-right':'msg-left'">
						<u-avatar size="80" class="user-img" :src="item.fromAvatar" @click="lookpersonalpage(item)"></u-avatar>
						<!-- 文字 -->
						<view class="message" v-if="item.msgType == 0">
							<view class="msg-text">{{ item.content }}</view>
						</view>
						<!-- 寻搭模块 -->
						<view class="message" v-if="item.msgType == 4">
							<view style="background: linear-gradient(to right, #ffdf80, #dff0fc);height: auto;padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 20rpx;">
							<view style="font-weight: bold;">{{ item.content }}</view>
							<view v-if="item.fromId==myInfo.id" style="font-size: 30rpx;">已向对方发送搭子申请等待对方回应</view>
							<view   style="background-color: white;margin:30rpx 20rpx 20rpx 30rpx;display: flex;height: 180rpx;padding-top: 20rpx;padding-left: 20rpx;" >
								<view style="width: 90%;height: 200rpx;">
									<text style="font-weight: bold;padding-bottom: 20rpx;">{{item.articleTitle}}</text>
									<view style="word-break: break-all;
							          overflow: hidden;
							          display: -webkit-box;
							          -webkit-line-clamp: 2;
							          -webkit-box-orient: vertical;font-size: 29rpx;padding-top: 20rpx;" >{{item.articleContent}}</view>
								</view>
								<image :src="item.articleImg" style="height: 160rpx;" mode="aspectFit"></image>
							</view>
					<!-- 		<view  v-if="item.fromId!=myInfo.id" style="background-color: white;margin:30rpx 20rpx 20rpx 30rpx;display: flex;height: 180rpx;padding-top: 20rpx;padding-left: 20rpx;" >
								<view style="width: 90%;height: 200rpx;">
									<text style="font-weight: bold;padding-bottom: 20rpx;">{{friendInfo.title}}</text>
									<view style="word-break: break-all;
							          overflow: hidden;
							          display: -webkit-box;
							          -webkit-line-clamp: 2;
							          -webkit-box-orient: vertical;font-size: 29rpx;padding-top: 20rpx;" >{{friendInfo.content}}</view>
								</view>
								<image :src="friendInfo.firstImg" style="height: 160rpx;" mode="aspectFit"></image>
							</view> -->
							<view v-if="item.fromId!=myInfo.id">
								<view style="font-size: 30rpx;">对方申请与您成为搭子关系</view>
								<view style="display: flex;">
									<button size="mini" @click="accept(item)">接受</button>
									<button size="mini" @click="disagree">拒绝</button>
								</view>	
							</view>
							
							</view>
	
						</view>
						<!-- 搭子建立 -->
						<view class="message" v-if="item.msgType == 5">
							<view style="background: linear-gradient(to right, #ffdf80, #dff0fc);height: auto;padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 20rpx;">
							<view style="font-weight: bold;">{{ item.content }}</view>
							<view  style="font-size: 30rpx;text-align: center;">搭子关系建立成功</view>
							
							</view>
						</view>
						<!-- 拒绝建立 -->
						<view class="message" v-if="item.msgType == 6">
							<view style="background: linear-gradient(to right, #ffdf80, #dff0fc);height: auto;padding: 10rpx 20rpx 10rpx 20rpx;border-radius: 20rpx;">
							<view style="font-weight: bold;">{{ item.content }}</view>
							<view  style="font-size: 30rpx;text-align: center;">已拒绝</view>
							
							</view>
						</view>
						<!-- 图片 -->
						<view class="message" v-if="item.msgType == 1">
							<image class="msg-img" :src="item.content" mode="widthFix" @click="previewImage(item.content)"></image>
						</view>
						<!-- 音频 -->
						<view class="message" v-if="item.msgType == 2">
							<view class="msg-text voice" :style="{width: item.content.time*3 + 'px'}" @tap="playVoice(item.content.voice)">
								<image class="voice-img" src="../../static/voice.png"></image>
								{{ item.content.time }} "
							</view>
						</view>
						<!-- 位置 -->
						<view class="message" v-if="item.msgType == 3">
							<view class="msg-map" @tap="openLocation(item.content)">
								<view class="map-name">{{ item.content.name }}</view>
								<view class="map-address">{{ item.content.address }}</view>
								<!-- <image class="map-img" src="../../static/location-img.jpg" mode="aspectFit"></image> -->
								<!-- <map class="map" :longitude="item.message.longitude" :latitude="item.message.latitude" :markers="covers(item.message)"></map> -->
							</view>
						</view>
						<u-icon v-if="item.isRead>=3" style="margin: 0 15rpx;" name="error-circle-fill" color="red" size="50"></u-icon>
					</view>
				</view>
			</view>
			<view class="padbt">
				
			</view>
		</scroll-view>
		<u-popup :show="show" mode="center" :closeable='true' round="20rpx" customStyle="width: 500rpx;height: 800rpx;z-index:5;" close-icon-size="30rpx"  @close="closefloat">
			<!-- <view style="padding-top:60rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">你想了解我的寻搭需求吗！</view>
			<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
			<u-button   color="#ffdf80" style="font-size: 40rpx;color: black;" @click="requestChat">请求聊天</u-button>
			
			</view> -->
			<scroll-view scroll-y="true" style="height: 600rpx;width: 400rpx;margin: auto;">
				<view>
				<text style="font-size: 50rpx;font-weight: bold;white-space: pre-wrap;text-align: justify;">平台监管政策</text>
				</view>
				<text >一拍即合在此特别提醒您在接受搭子关系前，请认真阅读平台监管政策（以下简称“本政策”），确保您充分理解本政策中各条款。选择“接受搭子关系”选项视为对本政策的接受，同意接受本政策各项条款的约束。如果没有父母或监护人的同意，未成年人不得独自进行搭子活动。如您是未成年人，请您的父母或监护人仔细阅读本政策，并在征得您的父母或监护人同意的前提下进行搭子活动。
				一、用户个人信息监管
				1.您应确保在使用一拍即合APP的过程中填写以及向搭子提供的个人信息真实准确，如姓名、身份、手机号码、地理位置等。；
				2.未经其他用户同意，不得泄露其他用户的个人信息。
				二、用户发布内容监管
				1.本条所述内容是指您在搭子活动过程中所制作、上载、复制、发布、传播的任何内容，包括但不限于帐号头像、名称、用户说明等注册信息及认证资料，或文字、语音、图片、视频、图文等发送、回复或自动回复消息和相关链接页面，以及其他使用帐号或本服务所产生的内容。
				2.您不得利用一拍即合软件平台制作、上载、复制、发布、传播以下法律、法规和政策禁止的内容：
				1）反对宪法所确定的基本原则的；
				  （2）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一；
				  （3）损害国家荣誉和利益的；
				  （4）煽动民族仇恨、民族歧视，破坏民族团结的；
				  （5）破坏国家宗教政策，宣扬邪教和封建迷信的；
				  （6）散布谣言，扰乱社会秩序，破坏社会稳定的；
				  （7）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
				  （8）侮辱或者诽谤他人，侵害他人合法权益的；
				  （9）不遵守法律法规底线、社会主义制度底线、国家利益底线、公民合法权益底线、社会公共秩序底线、道德风尚底线和信息真实性底线的“七条底线”要求的；
				  （10）含有法律、行政法规禁止的其他内容的信息。
				  3.您不得利用一拍即合软件平台制作、上载、复制、发布、传播如下干扰一拍即合APP正常运营，以及侵犯其他用户或第三方合法权益的内容：
				  （1）含有任何性或性暗示的；
				    （2）含有辱骂、恐吓、威胁内容的；
				    （3）含有骚扰、垃圾广告、恶意信息、诱骗信息的；
				    （5）侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的；
				    （6）含有其他干扰本APP正常运营和侵犯其他用户或第三方合法权益内容的信息。
                 三、用户反映及投诉渠道
                 若您遭受违反本政策上述条款的行为，请联系一拍即合客服。平台经核对后，将对实施该行为的用户进行禁止寻搭、禁言或封号等处罚。

		        </text>
			</scroll-view>
			<view style="padding-left: 20rpx;display: flex;padding-right: 20rpx;padding-bottom: 20rpx;">
				<checkbox-group style="padding-top: 20rpx;" @change="checkboxChange">
				<label>
				<checkbox :checked="state" borderColor="#ff9d66" color="#000000" />
				</label>
				</checkbox-group>
				<!-- <image :src="right" style="height: 30rpx; margin-left: 20rpx;margin-right: 20rpx;" mode="heightFix" @click="fillRight"> </image> -->
				<text style="margin-left: 10rpx;color:#ff9d66;font-size: 25rpx;font-weight: 400;margin-top: 10rpx;" >我已经详细阅读并认可，对整体内容和各项规定均无异议 </text>
			</view>
			
		</u-popup>
		<u-popup :show="show1" mode="center" :closeable='true' round="20rpx" customStyle="width: 500rpx;height: 800rpx;z-index:5;" close-icon-size="30rpx"  @close="closefloat1">
			<!-- <view style="padding-top:60rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">你想了解我的寻搭需求吗！</view>
			<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
			<u-button   color="#ffdf80" style="font-size: 40rpx;color: black;" @click="requestChat">请求聊天</u-button>
			
			</view> -->
			<scroll-view scroll-y="true" style="height: 600rpx;width: 400rpx;margin: auto;">
				<view>
				<text style="font-size: 50rpx;font-weight: bold;white-space: pre-wrap;text-align: justify;">用户使用协议</text>
				</view>
				<text >为了搭子活动更加顺利地进行，保障您和搭子的安全，并明确各方责任，请您仔细阅读本《用户使用协议》（以下简称“本协议”），特别是涉及加重责任的条款、法律适用和争议解决条款等。其中，加重责任条款等重要内容将以加粗或下划线的形式提示您注意，您应重点阅读。选择“接受搭子关系”选项视为同意本协议。如您未满18周岁，请您在法定监护人陪同下仔细阅读并充分理解本协议，并征得法定监护人的同意后进行搭子活动。
				一、用户承担的义务
				1.您在进行搭子活动的全过程中，愿意保持良好的综合素养和礼貌态度，尊重搭子，遵守平台的监管规范。
				2.您应对利用“一拍即合”软件平台传送信息的真实性、合法性、无害性、准确性和有效性等全权负责。
				3.您与搭子应通过友好协商约定搭子活动的内容、时间和地点等事项。
				4.您应遵守约定，在指定的时间和地点进行约定的活动。如活动事项有变动，应及时友好协商。
				5.您应自觉保护搭子的个人信息。
				6.您与搭子应互相承担安全保障义务，互相提醒搭子活动过程中可能存在的安全风险，尽可能互相保障人身安全。
				  二、违约责任
				  1.如果您未履行本协议第一条所规定的义务，可能受到平台禁止寻搭、禁言或封号的处罚。
				  2.如果因为您前款所称的违约行为造成搭子或平台的损失或严重后果的，您应当承担违约责任，损失赔偿见本条第3款所列。
				  3.本条第2款所述损失赔偿包括：
				  （1）损失赔偿额为搭子或平台因您的违反协议行为所受到的实际经济损失；
				  （2）搭子或平台因调查您的违反协议行为而支付的合理费用；
				  （3）因您的违反协议行为侵犯了搭子的人身权益或平台享有的权益，搭子或平台可以根据本协议要求您承担违约责任，或者根据国家有关法律、法规要求您承担侵权责任。
				  三、争议解决
				  本协议的解释、适用及争议解决均适用平台所在地的法律。双方应通过友好协商解决因本协议引起的任何争议。协商不成时，任何一方可向平台所在地人民法院提起诉讼。
				  四、其他条款
				  1.本协议未尽事宜，可由您与搭子双方协商补充；
				  2.本协议自您同意接受搭子关系之时起生效。
				 
		        
		
		
		        </text>
			</scroll-view>
			<view style="padding-left: 20rpx;display: flex;padding-right: 20rpx;padding-bottom: 20rpx;">
				<checkbox-group style="padding-top: 20rpx;" @change="checkboxChange1">
				<label>
				<checkbox :checked="state1" borderColor="#ff9d66" color="#000000" />
				</label>
				</checkbox-group>
				<!-- <image :src="right" style="height: 30rpx; margin-left: 20rpx;margin-right: 20rpx;" mode="heightFix" @click="fillRight"> </image> -->
				<text style="margin-left: 10rpx;color:#ff9d66;font-size: 25rpx;font-weight: 400;margin-top: 10rpx;" >我已经详细阅读并认可，对整体内容和各项规定均无异议 </text>
			</view>
			
		</u-popup>
        <u-popup :show="showPartner" mode="center" :closeable='true' round="20rpx" customStyle="width: 600rpx;height: 700rpx;z-index:1;" close-icon-size="30rpx"  @close="close">
        	<view style="padding-left: 20rpx;padding-right: 20rpx;">
			<view style="font-weight: bold;font-size: 40rpx;text-align: center;padding-top: 20rpx;">搭子关系</view>
			<view style="">发起并经过对方同意之后，双方建立搭子关系，搭子活动将受到平台的监管与保护</view>
			<view style="font-weight: bold;font-size: 40rpx;text-align: center;padding-top: 20rpx;">搭子关系建立之后</view>
			<view>①达到发起寻搭的期望人数后将自动为您关闭寻搭帖子，其他用户将无法再通过此贴与贴主发起聊天</view>
			<view>②贴主和搭子可在“个人主页”-“我的伙伴”中查看帖子，活动将自动为您添加至“进行中的事项”</view>
			<view style="display: flex;color:#ff9d66;">
				<view style="text-decoration: underline;" @click="platformmanage">平台监管政策</view>
				<view style="text-decoration: underline;padding-left: 40rpx;" @click="userporotol">用户使用协议</view>
			</view>
        	<view style="padding-top: 20rpx;padding-left: 10rpx;padding-right: 10rpx;display: flex;">
        	<u-button   color="#ffdf80" style="font-size: 30rpx;color: black;width: 250rpx;" @click="acceptPartner">接受搭子关系</u-button>
        	<u-button   color="grey" style="font-size: 30rpx;color: black;width: 250rpx;" @click="close">再考虑一下</u-button>
        	</view>
			</view>
        </u-popup>
		<u-popup :show="showReject" mode="center" :closeable='true' round="20rpx" customStyle="width: 600rpx;height: 400rpx;z-index:1;" close-icon-size="30rpx"  @close="close">
			<view style="padding-left: 20rpx;padding-right: 20rpx;">
			<view style="font-weight: bold;font-size: 40rpx;text-align: center;padding-top: 20rpx;">拒绝建立搭子关系</view>
			<view style="padding-top: 30rpx;">茫茫人海，找到志同道合的伙伴实属不易，真的不再考虑一下吗？</view>
		
			<view style="padding-top: 40rpx;padding-left: 10rpx;padding-right: 10rpx;display: flex;">
			<u-button   color="#ffdf80" style="font-size: 30rpx;color: black;width: 400rpx;" @click="reject">不再考虑，拒绝搭子关系</u-button>
			<u-button   color="grey" style="font-size: 30rpx;color: black;width: 120rpx;" @click="close">取消</u-button>
			</view>
			</view>
		</u-popup>
		<view >

		<submit :name="name" @sendMsg="sendMsg" @height="getHeight" @tobePartner="tobePartner"></submit>
		</view>
		<u-popup  :show="show" :overlay="false" mode="top">
			<view class="popup">
				<u-avatar class="popup-avatar" :src="outerMsg.fromAvatar" size="80"></u-avatar>
				<view class="popup-content">
					<text class="popup-username">{{ outerMsg.fromUsername }}</text>
					<view class="popup-message">
						<text v-if="outerMsg.msgType == 0">{{ outerMsg.content }}</text>
						<text v-if="outerMsg.msgType == 1">[图片]</text>
						<text v-if="outerMsg.msgType == 2">[音频]</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import submit from '../../components/submit/submit.vue'
	import { getMsgAllByUserId, addMsg, robot, getGroups, getGroupMsgAllByid, setReadedNews } from '../../common/api.js'
	
	const innerAudioContext = uni.createInnerAudioContext();
	
	export default {
		components: {
			submit,
		},
		data() {
			return {
				type: 0, // 0表示私聊，1表示群聊
				inputh: '60', // submit输入部分的高度变化
				scrollToView: '',
				myInfo: {},
				friendInfo: {}, // 私聊用户
				memberList: [], //群聊成员
				groupInfo: {}, // 群信息
				msgs: [],
				state:true,
				state1:true,
				imgMsgs: [],
				oldTime: new Date(),
				wsAddress: 'ws://localhost:8085', //	websocket 服务器地址
				show: false,
				outerMsg: {},
				date: new Date(),
				name:'',
				showPartner:false,
				showReject:false,
				show:false,
				show1:false,
				click:false,
				receivedMessageIds: new Set(),
				articleId:''
				
			}
		},
		onShow() {
			// let myInfo = uni.getStorageSync("userInfo")
			// const data = JSON.stringify({
			// 			code: "1001",
			// 			id: myInfo.id,
			// 			type: 0, // 0表示私聊，1表示群聊
			// 		})
			// // 打开一个websocket
			//  this.websocket = uni.connectSocket({
			// 	url: 'ws://127.0.0.1:8085',
			// 	success: () => {
			// 		console.log("websocket连接成功")
			// 	}
			// })
			// // 建立连接
			// this.websocket.onOpen(evt => {
			// 	console.log("websocket连接已打开")
			// 	// 发送我已上线的消息
			// 	this.websocket.send({
			// 		data: data
			// 	})
			// })
			// 接收服务器发来的数据
			this.websocket.onMessage((evt) => {
				// console.log(evt,"123456")
				let data = JSON.parse(evt.data).message
				let msg = JSON.parse(data)
				if(this.receivedMessageIds.has(msg.id)){
					return
				}
				// console.log(msg)
				if(this.type==0){
					if(this.friendInfo.id == msg.fromId){
						this.rebuildMsgs([msg])
					}else{
						this.show = false
						this.outerMsg = msg
						this.show = true
						setTimeout(()=> this.show=false, 1500)
					}
				}else{
					if(this.groupInfo.id == msg.toId){
						if(this.myInfo.id != msg.fromId)
							this.rebuildMsgs([msg])
					}else{
						this.show = false
						this.outerMsg = msg
						this.show = true
						setTimeout(()=> this.show=false, 1500)
					}
				}
				this.receivedMessageIds.add(msg.id);
				
			})
		},
		
		onLoad(options) {
			
			console.log(options)
			this.type = options.type
			this.myInfo = uni.getStorageSync("userInfo")
			if(this.type==0){ // 私聊
				this.friendInfo = {
					...options
				}
			
				
				this.name=this.friendInfo.new
				this.getMsg()
				console.log(this.friendInfo)
			}else { //type=1 群聊
				this.groupInfo = {
					...options
				}
				this.getGroupMsg()
			}
			this.setReaded()
		},
		// beforeDestroy() {
		// 	this.setReaded()
		// },
		methods: {
			setReaded(){
				let params = {
					toId: this.myInfo.id,
					fromId: this.friendInfo.id
				}
				setReadedNews({params}).then(res => {
					console.log('消息都已读')
				})
			},
			close(){
				this.showPartner=false
				this.showReject=false
			},
			accept(item){
				this.showPartner=true
				this.articleId=item.from_articleId
			},
			checkboxChange(){
				this.state=!this.state
			},
			checkboxChange1(){
				this.state1=!this.state1
			},
			closefloat(){
				this.show=false
				this.showPartner=true
			},
			closefloat1(){
				this.show1=false
				this.showPartner=true
			},
			platformmanage(){
				this.show=true
				this.showPartner=false
			},
			userporotol(){
				this.show1=true
				this.showPartner=false
			},
			lookpersonalpage(item){
			
				if(item.fromId!=this.myInfo.id){
					
				uni.navigateTo({
					url:'/pages/mine/personMainPage/personMainPage?id='+item.fromId+'&myId='+this.myInfo.id+'&status=0'
				})	
				// uni.navigateTo({
				// 	url: '/pages/mine/personMainPage'
				// })
				}
			},
			acceptPartner(){
				this.showPartner=false
				if(this.state!=true){
					this.$u.toast('未同意平台监管协议');
					return;
				}
				if(this.state1!=true){
					this.$u.toast('未同意用户使用协议');
					return;
				}
				let data={
					message:"嗨，朋友有兴趣成为搭子吗？",
					type:5
					
				}
				
				
				this.$H.post("/joinArticle/signUp?userId="+this.friendInfo.id+"&id="+this.friendInfo.from_articleId).then(res=>{
					console.log(res)
				})
				let art={
					status:1,
					id:this.articleId
				}
				this.$H.post("articles/update",art).then(res=>{
					console.log(res)
				})
				
				this.sendMsg(data)
			},
			reject(){
				this.showReject=false
				let data={
					message:"嗨，朋友有兴趣成为搭子吗？",
					type:6
					
				}
				this.sendMsg(data)
			},
			disagree(){
				this.showReject=true
			},
			// 滚动到底部
			toBottom(){
				this.scrollToView = ''
				this.$nextTick(()=>{
					if(this.msgs.length>0){let len = this.msgs.length - 1
					this.scrollToView = "msg" + this.msgs[len].id}
					
				})
			},
			tobePartner(){
				// let click=uni.getStorageSync("click")
				if(this.click==false){
				let data={
					message:"嗨，朋友有兴趣成为搭子吗？",
					type:4
					
				}
				this.sendMsg(data)
				this.click=true
				// uni.setStorageSync("click",1)
				}
			},
			getHeight(e){
				this.inputh = e
				this.toBottom()
			},
			sendMsg(data){
				let len = this.msgs.length
				// 时间间隔
				let nowTime = new Date()
				let t = this.spaceTime(this.oldTime, nowTime)
				if(t){
					this.oldTime = t
				}
				nowTime = t
				let msgObj = {
					id: len !=0 ?  this.msgs[len-1].id+1 : 1,
					fromId: this.myInfo.id,
					fromAvatar: this.myInfo.avatar,
					fromUsername: this.myInfo.username,
					toId: this.type==0 ? this.friendInfo.id : this.groupInfo.id,
					toAvatar: this.friendInfo.avatar,
					toUsername: this.friendInfo.username,
					content: data.message,
					msgType: data.type,
					createTime: nowTime,
					type: this.type, //	0:用户、1:群组
					from_articleId:this.friendInfo.articleId,
					articleTitle:this.friendInfo.title,
					articleContent:this.friendInfo.content,
					articleImg:this.friendInfo.firstImg
					
					
				}
				if(this.websocket){
				this.websocket.send({
					
					data:JSON.stringify(msgObj),
					async success() {
									console.log("消息发送成功");
								}
				})
				console.log("zzz")
				}
				// this.socket.send({
				//         data: JSON.stringify({
				//           content: content,
				//           sender: 'user', // 可根据实际需求设置
				//           timestamp: new Date().getTime()
				//         })
				//       });
				// 发送信息到服务器
				addMsg(msgObj).then((res)=>{
					let status = res.data
					if(status == 0){
						msgObj.isRead = 3
					}
				}).finally(()=>{
					// 回显信息
					this.msgs.push(msgObj)
					this.$nextTick(()=>{
						this.scrollToView = "msg" + msgObj.id
					})
					if(data.type==1){
						this.imgMsgs.push(data.message)
					}
				})
				
			},
			toBack(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 重构消息列表
			rebuildMsgs(msgs){
				let that=this
				for(let i=0; i<msgs.length;i++){
					// 用户头像
					msgs[i].fromAvatar = msgs[i].fromAvatar
					// 时间间隔
					let t = this.spaceTime(this.oldTime, msgs[i].createTime)
					if(t){
						this.oldTime = t
					}
					msgs[i].createTime = t
			
					// 图片信息
					if(msgs[i].msgType == 1){
						msgs[i].content = msgs[i].content
						this.imgMsgs.unshift(msgs[i].content)
					}
					// if(msgs[i].msgType == 4){
					// 		that.$H.get('articles/selectById?id='+msg[i].from_articleId).then(res=>{
					// 			if(res.code==200){
					// 				console.log(res)
					// 			}
					// 		})
					// }
				  //   if(msgs[i].msgType==4&&msgs[i].fromArticleId!=null){
						// console.log("123456")
					// this.$H.get('articles/selectById?id='+msgs[i].fromArticleId).then(res=>{
					// 	if(res.code==200){
					// 		// console.log(res)
					// 		this.friendInfo.title=res.res.title
					// 		this.friendInfo.content=res.res.content
					// 		this.friendInfo.firstImg=res.res.images[0]
					// 	}
					// })
					// console.log(this.friendInfo)
				// }
				   // console.log(msgs[i])
						
					this.msgs.push(msgs[i])
				}
				this.toBottom()
			},
			getGroupMsg(){
				let params = {
					id: this.groupInfo.id
				}
				getGroupMsgAllByid({params}).then(res => {
					this.rebuildMsgs(res.data)
				})
			},
			getMsg(){
				let params = {
					myId: this.myInfo.id,
					friendId: this.friendInfo.id
				}
				getMsgAllByUserId({params}).then(res=>{
					this.rebuildMsgs(res.data)
				}).catch(Error => {
					// let msgs = message()
					// for(let i=0; i<msgs.length;i++){
					// 	msgs[i] = {
					// 		id: msgs[i].tip,
					// 		fromId: msgs[i].id,
					// 		fromAvatar: msgs[i].imgurl,
					// 		createTime: msgs[i].time,
					// 		msgType: msgs[i].type,
					// 		content: msgs[i].message,
					// 	}
					// 	// 用户头像
					// 	msgs[i].fromAvatar = msgs[i].fromAvatar
					// 	// 时间间隔
					// 	let t = this.spaceTime(this.oldTime, msgs[i].createTime)
					// 	if(t){
					// 		this.oldTime = t
					// 	}
					// 	msgs[i].createTime = t
									
					// 	// 图片信息
					// 	if(msgs[i].msgType == 1){
					// 		msgs[i].content = msgs[i].content
					// 		this.imgMsgs.unshift(msgs[i].content)
					// 	}
					// 	if(msgs[i].msgType==4){
					// 		this.$H.get('articles/selectById?id='+msg[i].from_articleId).then(res=>{
					// 			if(res.code==200){
					// 				console.log(res)
					// 			}
					// 		})
					// 	}
					// 	this.msgs.unshift(msgs[i])
					// }
					this.toBottom()
				})
					
			},
			previewImage(imgurl) {
				uni.previewImage({
					urls: this.imgMsgs,
					current: this.imgMsgs.indexOf(imgurl),
				})
			},
			// 音频播放
			playVoice(val){
				innerAudioContext.src = val
				innerAudioContext.play()
			},
			// 定位
			openLocation(message){
				uni.openLocation({
					name: message.name,
					address: message.address,
					latitude: message.latitude,
					longitude: message.longitude,
					success: function () {
						console.log('success');
					},
					fail() {
						console.log('fail')
					}
				})
			},
			spaceTime(old, now){
				old = new Date(old)
				now = new Date(now)
				var told = old.getTime()
				var tnow = now.getTime()
				if(Math.abs(told-tnow) >1000*60*2){
					return now;
				}
				return '';
			},
			personalInfoPage(){
				console.log(123)
				uni.navigateTo({
					// url:'/pages/mine/personalInfoPage/personalInfoPage'
					url: '/pages/mine/personalInfoPage/personalInfoPage?nickname='+this.friendInfo.username+'&avatar='+this.friendInfo.avatar+'&id='+this.friendInfo.id+'&myId='+this.myInfo.id
				})
			},
			// 处理时间格式
			handleTime(date){
				if(date=='') return
				var time;
				var d = new Date(date);
				var n = new Date();
				//获取时间戳
				var dd = d.getTime();
				var h = d.getHours();
				var m = d.getMinutes();
				var Y = d.getFullYear();
				var M = d.getMonth() + 1;
				var D = d.getDate();
				//现在时间
				var nn = n.getTime();
				var hh = n.getHours();
				var mm = n.getMinutes();
				var YY = n.getFullYear();
				var MM = n.getMonth() + 1;
				var DD = n.getDate();
				
				if( D == DD && M == MM && Y ==YY){
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = h+':'+m;
					return time;
				}else if(D+1 == DD && M == MM && Y ==YY){
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = '昨天'+' '+h+':'+m;
					return time;
				}else if(Y === YY){
					// 今年
					if(M<10){
						M = '0'+M;
					}
					if(D<10){
						D = '0'+D;
					}
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = M+'月'+D+'日'+' '+h+':'+m;
					return time;
				}else {
					// 大于今年
					if(M<10){
						M = '0'+M;
					}
					if(D<10){
						D = '0'+D;
					}
					if(h<10){
					h = '0'+h;
					}
					if(m<10){
						m = '0'+m;
					}
					time = Y+'年'+M+'月'+D+'日'+' '+h+':'+m;
					return time;
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup{
		display: flex;
		flex-direction: row;
		align-items: center;
		.popup-avatar{
			margin: 20rpx;
		}
		.popup-content{
			.popup-username{
				font-size: 30rpx;
				font-weight: 900;
			}
			.popup-message{
				font-size: 25rpx;
			}
		}
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.header{
		width: 100%;
		height: 100rpx;
		position: fixed;
		background: linear-gradient(to right, #ffdf80, #fff4de);
		z-index: 1000;
		padding: 10px 0;
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid #c7c7c7 1px;
		.header-left{
			width: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header-center{
			font-size: 40rpx;
			font-weight: 600;
		}
		.header-right{
			width: 10%;
		}
	}
	.padbt{
		height: env(safe-area-inset-bottom);
		width: 100%;
	}
	.chat{
		// adjust-position:false;
		width: 100%;
		height: calc(100vh - var(--status-bar-height)); // 要想scroll-into-view生效，高度不能是百分比
		.chat-main{
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 140rpx;
			display: flex;
			flex-direction: column;
		}
		.chat-ls{
			.chat-time{
				font-size: 24rpx;
				color: rgba(39, 40, 50, 0.3);
				line-height: 34rpx;
				padding: 20rpx 0;
				text-align: center;
			}
			.msg-m{
				display: flex;
				padding: 20rpx 0;
				.user-img{
					flex: none;
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
				.message{
					flex: none;
					max-width: 480rpx;
				}
				.msg-text{
					font-size: 32rpx;
					color: rgba(39, 40, 50, 1);
					line-height: 44rpx;
					padding: 18rpx 24rpx;
					word-wrap : break-word;
				}
				.msg-img{
					max-width: 400rpx;
					border-radius: 20rpx;
				}
			}
			.msg-left{
				flex-direction: row;
				.msg-text{
					margin-left: 16rpx;
					border-radius: 0 20rpx 20rpx 20rpx;
					background-color: #e3e3e3;
				}
				.msg-img{
					margin-left: 16rpx;
				}
				.voice{
					text-align: right;
					font-size: 25rpx;
					.voice-img{
						float: left;
						width: 40rpx;
						height: 40rpx;
						padding-right: 15rpx;
					}
				}
			}
			.msg-right{
				flex-direction: row-reverse;
				.msg-text{
					margin-right: 16rpx;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
					background-color: #fff260;
				}
				.msg-img{
					margin-right: 16rpx;
				}
				.voice{
					text-align: left;
					font-size: 25rpx;
					flex-direction: row-reverse;
					.voice-img{
						float: right;
						transform: rotate(180deg);
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.voice{
				min-width: 100rpx;
				max-width: 400rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.msg-map{
				background-color: #fff;
				width: 460rpx;
				height: 284rpx;
				overflow: hidden;
				border-radius: 20rpx 0 20rpx 20rpx;
				.map-name{
					font-size: 32rpx;
					color: rgba(39, 40, 50, 1);
					line-height: 44rpx;
					padding: 18rpx 24rpx 0 24rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.map-address{
					font-size: 25rpx;
					color: gray;
					padding: 0 24rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				// .map-img{
				// 	width: 460rpx;
				// 	height: 300rpx;
				// 	padding: 8rpx;
				// }
			}
			
		}
	}
</style>
